"use strict";
// IMPORTS
// STYLES
// COMPONENTS
// EXPORTS

////////////////////////////////////////////////////////////////////////////////
// IMPORTS

import React, {
    Component,
} from 'react';

import {
    Image,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';


////////////////////////////////////////////////////////////////////////////////
// STYLES

var styles = StyleSheet.create({
    center_items: {
        flexDirection: 'row', 
        height: 36, 
        backgroundColor: '#113845', 
        justifyContent: 'center', 
        alignItems: 'center'
    },
    header_text: {
        flex:1,  
        color: '#ffffff', 
        textAlign:'center', 
        fontWeight:'bold', 
        marginTop: 2
    },
    button: {
        backgroundColor: 'white',
        padding: 15,
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: '#CDCDCD',
    }
});

////////////////////////////////////////////////////////////////////////////////
// COMPONENTS

class NavigationBar extends React.Component {
    
    constructor(props) {
        super(props);
        
        this.componentDisplayName = "NavigationBar";
        
        console.log("IN NavigationBar =======================");
        
        if (props.navigator) {
            console.log("props.navigator EXISTS");
            this.navigator = props.navigator;
            console.log(this.navigator);
        } else {
            console.log("props.navigator DOES NOT EXISTS");
        }
        
        if (props.text) {
            this.headerText = props.text;
        } else {
            this.headerText = "N/A";
        }
    }
    
    
    ////////////////////////////////////////////////////////////////////////////////
    // Event handlers
    
    onPressBackButton() {
        console.log("in " + this.componentDisplayName + " onPressBackButton");
        console.log(this.navigator);
        this.navigator.jumpBack();
    }
    
    onPressForwardButton() {
        console.log("in " + this.componentDisplayName + " onPressForwardButton");
        console.log(this.navigator);
        this.navigator.jumpForward();
    }
    
    onPressHomeButton() {
        console.log("in " + this.componentDisplayName + " onPressHomeButton");
        console.log(this.props.navigator);
        this.props.navigator.jumpForward();
    }
    
    onPressSleepButton() {
        console.log("in " + this.componentDisplayName + " onPressSleepButton");
        console.log(this.props.navigator);
        var curr_routes, r;
        curr_routes = this.props.navigator.getCurrentRoutes();
        for (r in curr_routes) {
            console.log(r);
            console.log(curr_routes[r]);
            console.log("asd");
        }
        
        var sleepRoute;
        sleepRoute = this.props.navigator.getCurrentRoutes().filter((x) => {
            if (x.name === "Scene 3") {
                return x;
            }
                 
        });
        
        console.log(sleepRoute);
        this.props.navigator.jumpTo(sleepRoute);
        //this.props.navigator.jumpTo({ name: "Scene 3", index: 3 });
    }
    
    onPressUserButton() {
        console.log("in " + this.componentDisplayName + " onPressUserButton");
        console.log(this.props.navigator);
        this.props.navigator.jumpForward();
    }
    
    render() {
        return (
            <View style={{ height: 36, backgroundColor: '#113845', flexDirection: 'row' }}>
                <TouchableOpacity onPress={() => this.onPressBackButton()} style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Image source={require('../assets/buttons/Arrow2-Left.png') }></Image>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this.onPressForwardButton()} style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Image source={require('../assets/buttons/Arrow2-Right.png') }></Image>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this.onPressHomeButton()} style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Image source={require('../assets/buttons/Home2.png') }></Image>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this.onPressSleepButton() } style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Image source={require('../assets/buttons/Sleep.png') }></Image>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this.onPressUserButton()} style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Image source={require('../assets/buttons/User.png') }></Image>
                </TouchableOpacity>
            </View>
        );
    }
}

////////////////////////////////////////////////////////////////////////////////
// EXPORTS

module.exports = NavigationBar;